import styles from './index.less';
import { Link, useLocation, history } from 'umi';
import ReactWeui from 'react-weui';
const { Footer, FooterText } = ReactWeui;
import { TabBar, NoticeBar } from 'antd-mobile';
import { useEffect, useState } from 'react';
import TestPage from './test';
import { KeepAlive } from 'umi';
import MyPage from './my';
import classNames from '@/utils/classnames';
import WechatTokenManage from './wechat-token-manage';

const homeTab = 'homeTab';

function IndexTabPage() {
  return (
    <div className={classNames('page', styles.page)}>
      <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>
        Notice: JSAPI支付上线了.
      </NoticeBar>
      <div className="weui-cells">
        <Link to="/wxpay-native" className="weui-cell weui-cell_access">
          <span className="weui-cell__bd">Native支付</span>
          <span className="weui-cell__ft"></span>
        </Link>
        <Link to="/wxpay-h5" className="weui-cell weui-cell_access">
          <span className="weui-cell__bd">H5支付</span>
          <span className="weui-cell__ft"></span>
        </Link>
        <Link to="/wxpay-jsapi" className="weui-cell weui-cell_access">
          <span className="weui-cell__bd">JSAPI支付</span>
          <span className="weui-cell__ft"></span>
        </Link>
        <Link to="/mp/jssdk-demo" className="weui-cell weui-cell_access cell">
          <span className="weui-cell__bd">Mp JS-SDK Demo</span>
          <span className="weui-cell__ft"></span>
        </Link>
        <Link to="/locpicker/qq" className="weui-cell weui-cell_access cell">
          <span className="weui-cell__bd">腾讯地图选点</span>
          <span className="weui-cell__ft"></span>
        </Link>
        <Link to="/locpicker/amap" className="weui-cell weui-cell_access cell">
          <span className="weui-cell__bd">高德地图选点</span>
          <span className="weui-cell__ft"></span>
        </Link>
        <Link
          to="/demo/soft-keyboard"
          className="weui-cell weui-cell_access cell"
        >
          <span className="weui-cell__bd">软键盘导致的页面不回落</span>
          <span className="weui-cell__ft"></span>
        </Link>
        <Link to="/browser-info" className="weui-cell weui-cell_access cell">
          <span className="weui-cell__bd">browser-info</span>
          <span className="weui-cell__ft"></span>
        </Link>
        <div className="weui-form__opr-area">
          {/* <button type="button" role="button" disabled={amount ? false : true} aria-disabled="true" className={`weui-btn weui-btn_primary ${amount ? '' : 'weui-btn_disabled'}`}
                        id="showTooltips" onClick={() => handleSubmit()}>下单</button> */}
        </div>
        <div className="weui-form__extra-area">
          <div className="weui-footer__links">
            <Link to="/wxpay-native" className="weui-footer__link">
              Native支付
            </Link>
            <Link to="/wxpay-h5" className="weui-footer__link">
              H5支付
            </Link>
          </div>
        </div>
        <Footer>
          <FooterText>好看的胸肌千篇一律，有趣的肚腩弹来弹去</FooterText>
        </Footer>
      </div>
    </div>
  );
}

function IndexPage() {
  const [selectedTab, setSelectedTab] = useState(homeTab);

  const location = useLocation();

  useEffect(() => {
    let hash = location.hash;
    if (hash) {
      hash = hash.substring(1, hash.length);
    }
    console.log(hash);

    setSelectedTab(hash || homeTab);
  }, []);

  function handleSwitchTab(tab: string) {
    setSelectedTab(tab);
    location.hash = tab;
    history.replace(location);
  }

  return (
    <div className="page">
      <TabBar
        unselectedTintColor="#949494"
        tintColor="#33A3F4"
        barTintColor="white"
      >
        <TabBar.Item
          title="Life"
          key="Life"
          icon={
            <div
              style={{
                width: '22px',
                height: '22px',
                background:
                  'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat',
              }}
            />
          }
          selectedIcon={
            <div
              style={{
                width: '22px',
                height: '22px',
                background:
                  'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat',
              }}
            />
          }
          selected={selectedTab === homeTab}
          badge={1}
          onPress={() => {
            handleSwitchTab(homeTab);
          }}
          data-seed="logId"
        >
          {IndexTabPage()}
        </TabBar.Item>
        <TabBar.Item
          icon={
            <div
              style={{
                width: '22px',
                height: '22px',
                background:
                  'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat',
              }}
            />
          }
          selectedIcon={
            <div
              style={{
                width: '22px',
                height: '22px',
                background:
                  'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat',
              }}
            />
          }
          title="Koubei"
          key="Koubei"
          badge={'new'}
          selected={selectedTab === 'redTab'}
          onPress={() => {
            handleSwitchTab('redTab');
          }}
          data-seed="logId1"
          style={{ position: 'relative' }}
        >
          {WechatTokenManage()}
        </TabBar.Item>
        <TabBar.Item
          icon={
            <div
              style={{
                width: '22px',
                height: '22px',
                background:
                  'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat',
              }}
            />
          }
          selectedIcon={
            <div
              style={{
                width: '22px',
                height: '22px',
                background:
                  'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat',
              }}
            />
          }
          title="Friend"
          key="Friend"
          dot
          selected={selectedTab === 'greenTab'}
          onPress={() => {
            handleSwitchTab('greenTab');
          }}
        >
          {}
        </TabBar.Item>
        <TabBar.Item
          icon={{
            uri: 'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg',
          }}
          selectedIcon={{
            uri: 'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg',
          }}
          title="My"
          key="my"
          selected={selectedTab === 'yellowTab'}
          onPress={() => {
            handleSwitchTab('yellowTab');
          }}
        >
          {MyPage()}
        </TabBar.Item>
      </TabBar>
    </div>
  );
}

export default function IndexPageState() {
  return (
    <KeepAlive>
      <IndexPage />
    </KeepAlive>
  );
}
